<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="图片地址">
      <el-input v-model="form.img" />
    </el-form-item>
    <el-form-item label="图片提示">
      <el-input v-model="form.alt" />
    </el-form-item>
    <el-form-item label="图片来源">
      <el-input v-model="form.link" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addRotation" plain>添加</el-button>
      <el-button @click="test">测试</el-button>
    </el-form-item>
  </el-form>
</template>
  
<script setup lang="ts">
import { reactive } from "vue";
import service from "../../../utils/service";
import { ElNotification } from "element-plus";

const form = reactive({
  img: "",
  alt: "",
  link: "",
});

//添加图片和非空判断
const addRotation = () => {
  if (form.img === "" || form.alt === "" || form.link === "") {
    open4();
  } else {
    service({
      url: "/banner/add",
      method: "post",
      data: form,
    }).then((res) => {
      if (res.data.code === "200") {
        open1();
        Judge(form.img);
      }
    });
  }
};

const open1 = () => {
  ElNotification({
    title: "添加成功",
    message: "已添加",
    type: "success",
  });
};

const open4 = () => {
  ElNotification({
    title: "警告",
    message: "请完整填写三项数据",
    type: "error",
  });
};

const Judge = (value: string) => {
  if (value === "") {
    console.log("img是空");
  } else {
    (form.img = ""), (form.alt = ""), (form.link = "");
  }
};

const test = () => {
  console.log();
};
</script>
  
<style scoped></style>